<template>
	<view>
		<view class="box">
			<p class="shi">事故地点：
				<view class="address">
					<input type="text" v-model="data.address" placeholder="请输入事发地点">
					<image src="../../static/dw.png" mode="" @click="getLocation"></image>
				</view>
			</p>
			<view class="im">
				<view>
					<p>导航截图：</p>
					<image @click="choosePhoto('导航截图')" :src="list[0].img" mode=""></image>
				</view>

				<view>
					<p>现场照片：</p>
					<image @click="choosePhoto('现场照片')" :src="list[1].img" mode=""></image>
				</view>

				<view>
					<p>视频上传：</p>
					<image @click="choosePhoto('视频上传')" :src="list[2].img" mode=""></image>
				</view>
			</view>
			<button @click="tj()" >提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					type: "2", //事故类型:1=事故,2=堵车
					remark: "", //事故描述
					address: "", //地址
					lot: "118.364687", //经度
					lat: "35.100514", //纬度
					scene_image: "", //现场图片
					scene_video: "", //视频
					nav_image: "" //导航截图
				},
				list:[
					{
						name:"导航截图",
						img:"../../static/add.png",
						imgs:""						
					},
					{
						name:"现场照片",
						img:"../../static/add.png",
						imgs:""						
					},
					{
						name:"视频上传",
						img:"../../static/add.png",
						imgs:""						
					}
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			// 获取定位
			getLocation() {
					uni.chooseLocation({
						success: res => {
							console.log(res);
							this.data.lat = res.latitude;
							this.data.lot = res.longitude;
							this.data.address = res.address || '';
						},
						fail: err => {
							console.log(err);
						}
					});
			},
			choosePhoto(x) {
				const _this = this;
				uni.chooseMedia({
					count: 1, //最多可以选择的图片张数，默认9
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，
					sizeType: ['original'],//original 原图，compressed 压缩图，默认二者都有
					success(res) {
						console.log('选择图片完成', res)
						for(let i =0;i<_this.list.length;i++)
						{
							if(x==_this.list[i].name)
							{
								// _this.list[i].img=res.tempFilePaths[0]; 
								if (res.tempFiles[0].thumbTempFilePath) {
									_this.list[i].img=res.tempFiles[0].thumbTempFilePath;
								} else{
									_this.list[i].img=res.tempFiles[0].tempFilePath;
								}
							}
						}
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},
			tj() {

				if(this.data.address == "")
				{
					uni.showToast({
									title: "请输入事故地点",
									icon:'none',
									duration:850
								});
									return
				}
				
				
				// 上传图片
				const _this = this;
				for(let i =0;i<_this.list.length;i++)
				{
					if(_this.list[i].img!="../../static/add.png")
					{
						console.log("上传图片："+i)
						_this.$rqt.uploadPhoto(_this.list[i].img,(res)=>{
							let kk = JSON.parse(res.data);
							console.log(kk.msg);
							if(kk.msg=="上传成功")
							{
								_this.list[i].imgs = kk.data.fullurl;
								console.log(kk.data.fullurl);
							}
						},(res)=>{
							console.log(res);
						})
					}else{
							uni.showToast({
											title: "请添加"+_this.list[i].name,
											icon:'none',
											duration:850
										});
							return
					}
				}


				

				setTimeout(()=>{
					this.data.scene_image = this.list[0].imgs; //现场图片
					this.data.scene_video = this.list[1].imgs //视频
					this.data.nav_image = this.list[2].imgs //导航截图
						this.$rqt.Accident_add(this.data).then(res => {
							// res.data
							console.log(res);
							this.indexdata = res.data;
							uni.showToast({
								title: res.msg,
								icon: "success",
								duration: 850
							});
						})
						setTimeout(()=>{
								uni.navigateBack({
									delta:1,//返回层数，2则上上页
								})
						},850)
				},1700)
				

			}
		}
	}
</script>

<style>
	.im {
		width: 100%;
		margin-top: 10px;
		overflow: hidden;
	}

	.box>button {
		width: 95%;
		color: #fff;
		height: 50px;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		border-radius: 25px;
		margin-top: 100px;
	}

	.im>view {
		float: left;
		width: 40%;
		margin-top: 10px;
		margin-right: 10px;
	}

	.im>view>p {
		padding-bottom: 10px;
		font-size: 18px;
		font-weight: 600;
	}

	.im>view>image {
		width: 80px;
		height: 80px;
	}

	.shi {
		display: flex;
		margin-bottom: 20px;
	}

	.shi>view {
		width: 70%;
		border-bottom: 1px solid #EEEEEE;
	}

	.shi>view>input {
		width: 90%;
		float: left;
	}

	.shi>view>image {
		float: right;
		width: 20px;
		height: 20px;
	}

	.box {
		padding-top: 20px;
		width: 90%;
		margin: 0 auto;
	}

	.box>p {
		font-size: 18px;
		font-weight: 600;
	}

	.box>textarea {
		height: 100px;
		width: 100%;
	}
	.address{
		margin-top: 10rpx;
	}
</style>
